<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .container{
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .house{
      width: calc(100% / 3);
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .conten{
      width: 200px;
      height: 200px;
      background-color: #ffffff;
      border: 1px solid;
      border-radius: 10px;
      border-color:#004ea2;
      opacity:50%;
    }
    .contenHover{
      border-color: #004ea2;
      opacity:1;
    }
    .contenHover>.top-img {
      background-image: url("img/house-sel.png");
    }
    .top{
      height: 82%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .top-img{
      width: 84.67px;
      height: 84.67px;

    }
    .name{
      height: 26px;
      font-family: Microsoft YaHei;
      font-weight: 700;
      color: #2e4668;
      font-size: 20px;

    }
    .numHouse{
      width: 200px;
      height: 18%;
      background-color: rgba(0, 78, 162, 0.1);
      border-radius: 0px 0px 10px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="house">
    <div class="conten contenHover">
      <div class="top ">
        <img class="top-img" src="img/house-sel.png" alt="">
        <div class="name">1568室</div>
      </div>
      <div class="numHouse">18号楼</div>
    </div>
  </div>
  <div class="house">
    <div class="conten contenHover">
      <div class="top">
        <img class="top-img" src="img/house-sel.png" alt="">
        <div class="name">1500室</div>
      </div>
      <div class="numHouse">18号楼</div>
    </div>
  </div>
</div>
</body>
</html>